<template>
  <div>
    <!-- 使用三级列表 -->
    <!-- 当跳转到属性管理界面时,禁用三级导航,传递一个自定义属性 -->
    <CategorySelector :disabledSelector="isShowAttr" style="margin-bottom:10px"></CategorySelector>
    <!-- 属性列表和属性管理页面不能同时显示 -->
    <el-card>
      <!-- 添加属性界面,v-if为true时,显示属性列表界面 -->
      <div v-if="isShowAttr">
        <!-- 单击添加属性，注册事件，由属性列表页面跳转到属性管理页面 -->
        <!-- 点击添加属性时,跳转到添加属性界面,清空原来添加属性的数据 -->
        <el-button type="primary" @click="toAddAttr" 
        :icon="Plus">添加属性</el-button>
        <!-- :data的值为数据源 -->
        <el-table border :data="attrList" v-loading='loading'>
          <el-table-column label='序号' width="80" align="center" type="index"/>
          <!-- prop的值为数组中对象的某一个属性名 -->
          <el-table-column label='属性名称' align="center" prop='attrName'/>
          <el-table-column label="属性值列表" align="center">
            <!-- 使用插槽 -->
            <template v-slot="{row,column,$index}">
              <!-- 属性标签存放在attrValueList中，需要进行遍历 -->
              <el-tag v-for="item in row.attrValueList" :key="item.id" type="success" style="margin-right:6px">{{item.valueName}}</el-tag>
            </template>
          </el-table-column>>
          <el-table-column label='操作' align="center">
            <template v-slot="{row,$index}">
              <!-- 修改按钮 -->
                <el-button :icon="Edit" type="warning" size="small" title="修改" @click="editAttrInfo(row)"></el-button>

                <!-- 删除按钮需要气泡框，点击确定之后删除 -->
                <!-- @confirm就是点击弹出框的确定触发的事件， @cancle 是取消触发的事件 -->
                <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                :title="`确定要删除${row.attrName}吗`"
                @confirm="remove(row.id)" 
              >
                <template #reference>
                  <el-button :icon="Delete" type="danger" size="small" title='删除' ></el-button >
                </template>
              </el-popconfirm>
               
            </template>
          </el-table-column>
        </el-table>

        <!-- ////////////////分隔线///////////////// -->
      </div>
      <!--属性管理页面  -->
      <div v-else>
        <span>属性名</span>
        <el-input style="width:200px;margin-left:10px" v-model="attr.attrName"></el-input>
        <div style="margin:20px 0">
          <el-button :disabled="!attr.attrName"  type="primary" :icon="Plus" @click="addValue">添加属性值</el-button>
          <el-button>取消</el-button>
        </div>

        <!-- 将数据源换成 attr.attrValueList 里面有几个对象数据,就会生成几行,所以需要写一个函数为attr.attrValueList 增加对象数据  -->
        <el-table style="margin-bottom:20px" 
        :data="attr.attrValueList">
          <el-table-column label="序号"
          type="index"  width="80">
          </el-table-column>
        
        <el-table-column label="属性值名称">
          <!-- 为了每个输入框都有自己的值,使用插槽 -->
          <template v-slot="{row,$index}">
            <!-- 定义 ref="inputRef"是为了获取输入框对象 -->
              <el-input ref="inputRef" v-if="row.isShowInput" v-model="row.attrValueName" @blur="showSpan(row,$index)" ></el-input>
              <span style="display:inline-block; width:100%" v-else @dblclick="showInput(row, $index)">{{row.attrValueName}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="{row, $index}">
            <el-popconfirm
              :title="`确定删除${row.attrValueName}吗?`"
              @confirm="() => {attr.attrValueList.splice($index, 1)}"
            > 
              <template #reference>
                <el-button title="删除" type="danger" :icon="Delete" size="small"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        </el-table>

        <el-button type="primary" @click="save" :disabled="!(attr.attrValueList.length>0)">保存</el-button>
        <!-- 点击取消时返回属性列表界面 -->
        <el-button @click="isShowAttr = true" >取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
name:'Attr'
}
</script>
<script setup lang="ts">
  //引入三级列表
  import CategorySelector from '@/components/CategorySelector/index.vue'
import { ref,watch ,reactive,nextTick} from 'vue'
import { Plus,Edit,Delete,InfoFilled } from '@element-plus/icons-vue'
import {useCategorySelectorInfoStore} from '@/stores/categorySelector'
import { reqGetAttrListDataByCategory3Id,reqDeleteOneAttr,reqAddOrUpdateAttrInfo} from '@/api/product/attr'
import { ElMessage } from 'element-plus'

//引入约束
import type { AttrModel, AttrListModel, AttrValueModel } from '@/api/product/model/attrModel'
  //注册
components: {
  CategorySelector
  }
const isShowAttr = ref(true)
//引入store
const CategorySelectorInfoStore = useCategorySelectorInfoStore()

//定义一个数据接收属性列表的数据
const attrList = ref<AttrListModel>([])

const loading = ref(false)

//定义一个根据一二三级Id获取属性列表的方法
const getAttrListData = async () => {
  //发送请求的过程使用加载动画
  loading.value = true
  const result = await reqGetAttrListDataByCategory3Id({
    category1Id: CategorySelectorInfoStore.category1Id,
    category2Id: CategorySelectorInfoStore.category2Id,
    category3Id:CategorySelectorInfoStore.category3Id,
  })
// 请求完成后结束加载动画
loading.value = false
  console.log('attrList', result);
  attrList.value = result
}
//点击添加属性之后
const toAddAttr = () => {
  //1.跳转
  isShowAttr.value = false
  //2.清空旧值
  attr.attrName = ''
  attr.attrValueList = []
  delete attr.id
  
}


//当category3Id有值时，才会出现属性列表界面
//需要监听catrgory3Id
//因为是监听CategorySelectorInfoStore对象里面的category3Id属性，所以属性名要写成函数形式,才能监听到新旧值的变化
watch(() => CategorySelectorInfoStore.category3Id, (newValue, oldValue) => {
  if (!newValue) {
    //将属性列表的数据源清空，表格就不会渲染了
    attrList.value = []
  return
  } else {
   //调用方法获取属性列表
   getAttrListData()
  }
 //此时，要开启立即监听
}, { immediate: true })

//定义一个要添加或更新的属性对象
const attr = reactive<AttrModel>({
  //要添加的属性名
  attrName: '',
  //属性值列表，是一个数组
  attrValueList: [],
  // 三级分类的具体Id
  categoryId:-1,
  //都是给三级Id的属性,所以写3
  categoryLevel: 3
})

//点击弹出框的确定触发删除属性事件
const remove = async(id:number) => {
  const result = await reqDeleteOneAttr(id)
  ElMessage({
    type: 'success',
    message:'删除成功'
  })
  //删除成功之后重新获取属性列表
  getAttrListData()

}


// 定义一个变量 为对应输入框 以便用于获取输入框对象
//inputRef为响应式的标签对象
const inputRef = ref(null)

//添加具体属性值,给attrValueList追加对象数据
const addValue = () => {
  attr.attrValueList.push({
    attrValueName: '',
    isShowInput: true,
  })
//点击添加属性值时,获取焦点,为了解决异步渲染的问题,使用 nextTick
  nextTick(() => {
 inputRef.value.focus()
 
})
}

//输入框无值时删除当前项

const showSpan = (row: any, index: any) => {
//删除重复的属性值  - > 截取前面的几项,和正在添加的一项的属性名比较,如果有相同的 ,赋值给item,item可能为对象,也可能为空

const item = attr.attrValueList.slice(0,-1).find(item=>item.attrValueName=== row.attrValueName)
  //不输入或输入相同都会删除
  if (!row.attrValueName||item) {
     //如果没有值 则删除当前行
     attr.attrValueList.splice(index, 1)
    return // 不要向下执行了
  }
   // 如果有值 则失去焦点后要显示span标签 而非el-input
   row.isShowInput = false
}

//当时span标签时,双击变为input标签,并获取焦点

const showInput = (row, index) => {
  //变为span标签
  row.isShowInput = true
  //显示焦点
  nextTick(() => {
    inputRef.value.focus()
  })
}

    //添加属性完成后点击保存按钮
    const save = async () => {
    // 添加必要的属性
    attr.categoryId = CategorySelectorInfoStore.category3Id as number

    // 对要提交的数据进行特定处理/整理操作(开发经常做)
    // 处理1: 过滤掉没有属性值名称的属性值对象
    // 处理2: 删除属性值对象中的edit属性
    // attr.attrValueList = attr.attrValueList.filter(item => {
    //   if (item.attrValueName) {
    //     delete item.isShowEdit
    //     return true
    //   }
    //   return false
    // })

    // 发请求
    await reqAddOrUpdateAttrInfo(attr)
    // 提示
    ElMessage.success('保存成功')
    // 回到列表页面
    isShowAttr.value = true
    // 重新获取列表显示
    getAttrListData()
    }

    //更新数据
const editAttrInfo = (row:any) => {
  //点击编辑实现界面切换
  isShowAttr.value = false
  console.log('rrow', row)
  console.log('attr',attr)
  
  // console.log(row.);
  
  //实现数据回显,后面的对象和前面的对象合并,如果有重复的,后面的覆盖前面的
  Object.assign(attr,row)  
    }
    


</script>
<style lang="scss" scoped>

</style>